﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>本例用于测试background-color属性</title>
<style type="text/css">
#body1{
	display:block;
	float:none;
	width:100%;
	height:auto;
	overflow:hidden;
	background-color:#0F0;
	*padding-bottom:20px;
}

.bgc{
float:left;
width:200px;
height:100px;
margin:20px;
padding:10px;
border:2px fuchsia solid;
	}
.mgd{
	float:left;
	width:200px;
	height:100px;
	margin:20px;
	padding:10px;
	border:2px fuchsia solid;
	overflow:auto;
}
#body2{
	display:block;
	float:none;
	width:100%;
	height:auto;
	overflow:hidden;
	*padding-bottom:20px;
}
#body2 div{
	float:left;
	width:200px;
	height:100px;
	margin:20px;
	padding:10px;
	border:2px green solid;
}
#bg1{
	background-color:maroon;
}
#bg2{
	background-color:#00CCFF;
}
#bg3{
	background-color:rgb(255,0,255);
}
#bg4{
	background-color:transparent;
}
</style>
</head>
<body>
<div id="body1">
<div class="bgc">本例用于测试background-color属性</div>
<div class="mgd">这个例子同时证明,margin是真空隔断，不能进行颜色、背景等实体指定。总宽度是2+10+200+10+2(px)；占位宽度是20+2+10+20+10+2+20(px)</div>
</div>
<div id="body2">
	<div id="bg1">使用颜色名填充</div>
	<div id="bg2">使用web颜色值</div>
	<div id="bg3">使用RGB颜色值</div>
	<div id="bg4">强制透明无颜色</div>
	<div id="bg5">值inherit不建议使用，IE不支持</div>
</div>
<div>使用overflow:hidden来自适应高度会导致IE6/7下子元素子元素的margin-bottom失效，在父元素使用相应*padding-bottom值解决</div>
</body>
</html>